<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,p{
            margin:0;
            padding:0;
        }
        body{
            color:#333;
            font:12px/1.5;
            padding-top:10px;
        }
        #outer{
            width:300px;
            margin:0 auto;
        }
        p{
            margin-bottom:10px;
        }
        button{
            margin-right:5px;
        }
        label{
            width:5em;
            display:inline-block;
            text-align:right;
        }
        input{
            padding:3px;
            font-family:inherit;
            border:1px solid #ccc;
        }
        #div1{
            color:#fff;
            width:180px;
            height:180px;
            background:#000;
            margin:0 auto;
            padding:10px;
        }
    </style>
</head>
<body>
    <div id="outer">
        <p><label>属性名：</label><input type="text" value="background" /></p>
        <p><label>属性值：</label><input type="text" value="" /></p>
        <p><label></label><button>确定</button><button>重置</button></p>
    </div>
    <div id="div1">在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果。</div>
</body>
</html>
<script>
    var changeStyle = function (elem, name, value) {
    	elem.style[name] = value	
    }
    // window.onload = function ()
    // {	
    	var oDiv = document.getElementById("div1");
    	var oBtn = document.getElementsByTagName("button");
    	var oInput = document.getElementsByTagName("input");
    	oBtn[0].onclick = function ()
    	{
    		changeStyle(oDiv, oInput[0].value, oInput[1].value)	
    	},
    	oBtn[1].onclick = function ()
    	{
    		oDiv.removeAttribute("style")
    	}
    // }
</script>